<template>
  <div class="counter">
    <div class="count reduce" @click="reduce">
    </div>
    <div class="input">
      <input type="number" v-model="propcount">
    </div>
    <div class="count plus" @click="plus">
    </div>
  </div>
</template>


<script>
  import {Toast} from 'vux'
  export default{
    name: 'Counter',
    props:{
      'count':{
        type:Number,
        default:1
    },
    'mix':{
      type:Number,
      default:1
    },
    'max':{
      type:Number,
      default:99
    }},
    components:{
      Toast
    },
    data (){
      return{
        propcount: this.count,
        text:'error',
        showToast: false
      }
    },
      methods:{
      plus () {
        this.propcount =this.propcount+1;
      },
      reduce () {
        this.propcount=this.propcount-1;
      },
      verify (val) {
        if(val > this.max){
            this.propcount=this.max
            this.$vux.toast.show({
              text:'购买数量不能大于'+this.max,
              position:'middle'
            })
        }
        if(val < this.mix){
            this.propcount=this.mix
            this.$vux.toast.show({
              text:'购买数量不能小于'+this.mix,
              position:'middle'
            })

        }else{
          return true
        }
      }
    },
    watch: {
      count(newVal){
        this.propcount = newVal
      },
      'propcount' (val) {
        const _this = this
        let result = parseInt(val)
        if(_this.verify(val)){
          _this.$emit('input',result)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../sass/mixin.scss';
  .counter{
    @include flex();
    .input,input{
      font-size: 36px;/*px*/
      width:60px;
      padding: 0 2%;
      text-align: center;
    }
  .count{
    width:48px;/*px*/
    height:48px;/*px*/
    background-color: transparent;
    // @include border-circle();
    // @include flex($jc:center,$ai:center);
    background: center center no-repeat;
    background-size: contain;
    &.plus{
      background-image: url(../../static/content_icon_plus.png);
    }
    &.reduce{
      background-image: url(../../static/content_icon_minus.png);
    }
  }
  }
</style>